<template>
<div>
  <router-link tag="div" to= '/' class="header-abs" v-show="showabs">
   <div class="iconfont header-abs-back">&#xe642;</div>
  </router-link>
  <div class="header-fixed" v-show="!showabs" :style="opacityStyle">
  <router-link  to= '/' >
   <div class="iconfont header-fixed-back">&#xe642;</div>
  </router-link>
  景点详情
  </div>
</div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showabs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 150 // 渐变透明
        opacity = opacity > 1 ? 1 : opacity // 三元判断
        this.opacityStyle.opacity = opacity
        this.showabs = false
      } else {
        this.showabs = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
 @import '~@/assets/style/varibles.styl'
 .header-abs
  position: absolute
  left : 1rem
  top: 0.8rem
  width: 2.5rem
  height : 2.5rem
  line-height : 2.5rem
  border-radius : 50%
  background : rgba(0, 0, 0, 0.66)
 .header-abs-back
  color: #c4bcbc
  font-size : 2rem
  padding-left :0.2rem
 .header-fixed
  position : fixed
  top: 0
  left: 0
  width: 100%
  height:3.3rem
  background-color : $bgColor
  color:#fff
  text-align :center
  line-height : 3rem
  font-size : 1.3rem
  .header-fixed-back
   position :absolute
   padding-left : 0.2rem
   font-size : 2rem
   color :#fff
</style>
